<template>
  <div class="home">
    <div class="box">
      <div class="content"></div>
    </div>
    <div class="box2">
      <div class="light"></div>
    </div>
    <div class="container-title">
    <span class="title-text container-title-scanning">项目分析</span>
    </div>
    <Global></Global>
    <MyCanvs></MyCanvs>
  </div>
</template>

<script>
import Global from "./Global.vue";
import MyCanvs from "./MyCanvs.vue";
// @ is an alias to /src
export default {
    name: "Home",
    components: { Global,MyCanvs }
}
</script>

<style scoped>
.box{
  margin-top: 200px;
  mask-image:linear-gradient(
    to bottom,
    transparent,
    pink,
    transparent
  );
  /* 增加遮罩蒙版 */
  overflow: hidden;
  position:absolute;
  top:0;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
} 

.content{
  width: 300px;
  height: 300px;
  background: #85f1d8;
  animation: spin 6s linear infinite;
}

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

.box2{
  width: 100%;
  height: 200px;
}
.light{
  width: 100px;
  height: 100px;
  background: lightpink;
  animation: breath_light 3s ease infinite;
}

@keyframes breath_light{
  0%{
    filter:brightness(100%);
  }
  50%{
    filter:brightness(200%);
  }
  100%{
    filter:brightness(100%);
  }
}

.container-title-scanning{
    position: relative;
    overflow: hidden;
    display: block;
    height: 50px;
    width: 100px;
    border-color: bisque;
}
.container-title-scanning::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        width: 20px;
        height: 100%;
        background-image: linear-gradient(to right, transparent 0%, #00ffff 100%);  
        z-index: -10;
        animation: scanning 2s infinite linear;
        opacity: 0.7;
    }
/* 定义一个从左向右的扫描动画 */
@keyframes scanning {
    0% {
        left: 0; 
        opacity: 0.7;
    }
    90% {
        left: 100%;
        opacity: 0.3;
    }
    100% {
        right: -20px;
        opacity: 0;
    }
}

</style>
